<template>
   <div class="goodsList">
    <router-link :to="'/goodsInfo/'+item.id" class="goods-item" tag="div" v-for="item in list" :key="item.id">
        <img :src="item.src" alt="">
        <h4>{{item.title}}</h4>
        <div class="info">
            <p>
                <span class="now">￥{{item.new}}</span>
                <span class="old">￥{{item.old}}</span>
            </p>
            <p class="sell">
                <span>热卖中</span>
                <span>剩{{item.stock}}件</span>
            </p>
        </div>
     </router-link>
    </div>
</template>

<script>
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
        getdata(){
            this.$http.get("http://goodslist.com").then(result=>{
                this.list = result.body
            }) 
        }
    },
   created() {
        this.getdata()
    },
}
</script>

<style scoped>
.goodsList{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    flex-wrap:wrap
}
.goods-item{
    width: 49%;
    border:1px solid #eee;
    box-shadow: 0 0 5px 2px #eee;
    height: 245px;
    position: relative;
    padding-top:10px
}
img{
    width: 100%;
    height: 150px
}
h4{
    font-weight: 600;
    text-align: center;
    font-size: 16px;
    color: #000

}
p{
    margin:0;
    padding: 0
}
.now{
    color: red;
    font-size: 18px;
    margin:0 10px
}
.old{
  text-decoration: line-through
}
.sell{
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    
    }
.info{
 background: #eee;
     position: absolute;
    bottom: 0;
    width: 100%
 
}
</style>